<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>客户管理-首页</title>
	<link rel="stylesheet" href="/js/plugin/layui-v2.3.0/layui/css/layui.css">
	<link rel="stylesheet" href="/css/reset.css">
	<link rel="stylesheet" href="/css/index.css">
	<link rel="stylesheet" href="/css/client.css">
	<script src='/js/jquery-2.1.1.min.js'></script>
    <script src='/js/plugin/layui-v2.3.0/layui/layui.js'></script>
    <script src='/js/common.js'></script>
</head>
<style>
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #F5F5F5;
    cursor: pointer;
}
::-webkit-scrollbar-thumb {
    background-color: #a2a2a2;
    border-radius: 2px;
}
html{
	overflow: scroll;
}
body{
	height: auto;
}
/* //加载更多 */
.layui-flow-more a cite{
	display: block !important;
	background:transparent;
	color:#62a8e9;
	font-size:14px;
	border:1px solid #62a8e9;
	padding: 5px 20px;
	border-radius:22px;
}
</style>
<body style="box-sizing: border-box;">
<div class="kb-out-box">
	<div class="kb-content my-locations-list">	
		<section class="kb-content-container clearfix">
			<header class="nav-header flex-center">
				<div class="chart-box" style="margin-right: 75px;">
					<a href="javascript:void(0)">
						<div class="statistic-box">
							<div class="statistic-box">
								<div class="header">
									<span class="number" id="newAddcus" th:text="${month.newAddcus}" >0</span>
									<span class="unit">个</span>
								</div>
								<div class="newAddcusName">
									<span><span class="date-type">本月</span>新增客户</span>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="chart-box" style="margin-right: 75px;">
					<a href="javascript:void(0)">
						<div class="statistic-box">
							<div class="statistic-box">
								<div class="header">
									<span class="number" id="win" th:text="${month.win}" >0</span>
									<span class="unit">个</span>
								</div>
								<div class="winName">
									<span><span class="date-type">本月</span>新赢单数</span>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="chart-box" style="margin-right: 75px;">
					<a href="javascript:void(0)">
						<div class="statistic-box">
							<div class="statistic-box">
								<div class="header">
									<span class="number" id="lose" th:text="${month.lose}" >0</span>
									<span class="unit">个</span>
								</div>
								<div class="loseName">
									<span><span class="date-type">本月</span>新流失数</span>
								</div>
							</div>
						</div>
					</a>
				</div>
				<div class="edit-way f-right" id="switchDate" >
					<span class="active" data-type="month" >本月</span>
					<span class="" data-type="week" >本周</span>
				</div>
			</header>
			<div class="nav-section-content-container pad-top-30 clearfix">
				<div class="nav-content-1 f-left">
					<div class="common-search">
					  	<input type="text" id="customerSearch" placeholder="输入客户名称或者手机号"  class="layui-input">
						<!-- 客户搜索结果列表 -->
						<ul id="customerList" class="customerList"></ul>
						<!-- 客户搜索结果列表 的模板 将div中的li取出放入上面ul中 -->
						<div style="display: none;" id="customerListTl" >
							<li style="cursor:pointer;">
								<div class="flex-between">
									<div class="name">
										<span class="customerName">北京彦伯源教育科技有限公司</span><span class="customerState status-win">赢单</span>
									</div>
									<div class="message">
										<div class="d-iblock">
											<i class="layui-icon layui-icon-cellphone"></i><span class="phone" >15512369875</span>
										</div>
										<div class="d-iblock color-nine">
											<span>跟进时间</span><span class="nextTimDate">15512369875</span>
										</div>
									</div>
								</div>
								<div class="flex-between">
									<div class="color-nine">
										<span>负责人&nbsp;&nbsp;</span><span class="executor">小草</span>
									</div>
									<div class="message">
										<div class="d-iblock color-nine">
											<span>创建时间</span><span class="created">15512369875</span>
										</div>
									</div>
								</div>
							</li>
						</div>
					</div>
					<div class="kb-title mag-bot-20">
						<span class="color-six">销售记录</span>
					</div>
					<div class="nav-comment-container">
						<div style="width: 100%; height: 100%; position: relative;">
							<div id="comment-wrap">
								<div class="m-updown">
									<div class="select-wrap layui-form">
										<div class="mag-bot-20 flex-between">
										    <div class="layui-input-inline" style="width: 200px;">
										        <input type="text" class="layui-input" id="sellDate" placeholder="选择日期 ">
										    </div>
										    <div class="layui-input-inline">
										      <select name="executor" id="executor" >
										        <option value="">选择负责人</option>
										      </select>
										    </div>
										    <div class="layui-input-inline">
										      <select name="customerState" id="customerState" >
										        <option value="">销售阶段</option>
										        <option value="0">初步接洽</option>
									     	 	<option value="1">赢单</option>
									     	 	<option value="2">流失</option>
										      </select>
										    </div>
										</div>	
									</div>
									<div class="clearfix">
										<button type="button" class="layui-btn layui-btn-radius layui-btn-normal f-left" id="searchBtn" >搜索</button>
									</div>
								</div>
								<!-- 放在流加载内容 -->
								<div id="m-list" ></div>
							</div>
						</div>
					</div>
				</div>
				<div class="nav-content-2 f-right">
					<div class="nav-container-content">
						<header class="nav-inner-header clearfix"><h2 class="header-title f-left">待跟进事项</h2></header>
						<ul class="desk-2-ul desk-3-ul" th:each="t:${followSell}" >
							<li>
								<a href="javascript:void(0)">
									<div class="flex-between">
										<span class="t-over" th:text="${t.executor}" >冯振轩</span>
										<span class="receipt-overdue" th:if="${t.state==1}" >逾期</span>
										<span class="receipt-overdue" th:if="${t.state==0}" >跟进</span>
									</div>
									<div class="task-status">
										<span>下次跟进时间</span>
										<span th:text="${#dates.format(t.nextTimDate,'yyyy-MM-dd')}" >1 个月前</span>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>		
		</section>
	</div>
</div>
</body>
<script th:inline="javascript" >
$(function(){
	
	var monthCount=[[${month}]];//本月个数
	var weekCount=[[${week}]];//本周个数
	
	layui.use(['form','flow','laydate'], function(){
		var form = layui.form;
		var flow = layui.flow; 
		var laydate = layui.laydate;
		var size=6;//流加载页的大小控制
		var params=new Object();
		sellFlow();//先加载默认
		function sellFlow(){
			//加载前先清空流容器内存，方便后续再次加载
			$("#m-list").empty();
			flow.load({
		      elem: '#m-list', //流加载容器
		      isAuto: false,
		      isLazyimg: true,
		      done: function(page, next){//加载下一页
		        //模拟插入
				$.post("/app/customerInfo/sellRecordLog",{
					limit:size,
					page:page,
					params:params
				},function(res){
				  var data=res.data,numAll=Math.ceil(res.count/size);
				  var lis = [];
		          $.each(data,function(i,v){
		        	var status=null,statusStr=null;;
		        	if(v.customerState==0){
		        		status="status-initial";
		        		statusStr="初步接洽";
		        	}else if(v.customerState==1){
		        		status="status-win";
		        		statusStr="赢单";
		        	}else if(v.customerState==2){
		        		status="status-failed";
		        		statusStr="流失";
		        	}
		            lis.push(`<div class="nav-comment-content border-bottom-lg">`
							+`<header class="clearfix">`
							+`<div class="comment-portrait">`
								+`<img src="../../images/user_head.jpg" alt="">`
							+`</div>`
							+`<div class="comment-name">`
								+`<span class="comment-people">`+v.fkDicCauseLoss+`</span>`
								+`<span class="comment-time">`+v.created+`</span>`
							+`</div>`
						+`</header>`
						+`<div class="nav-comment-text">`
							/* +`<p>`
								+`已成交`
								+`<span class="flow">#客户上门</span>`
							+`</p>` */
							+`<p>`
								+`<span style="color: rgb(51, 51, 51);">`+v.sellInfo+`</span>`
							+`</p>`
							+`<div class="communicate under-line">`
								+`<span class="`+status+`" >`+statusStr+`</span>`
								+`<i class="layui-icon layui-icon-username"></i>`
								+`<span>`
									+`<a href="javascript:void(0)">`+v.fkCustomer+`</a>`
								+`</span>`
							+`</div>`
						+`</div>`
					+`</div>`);
		          });
		          //加载数据
		          next(lis.join(''), page < numAll);
		        },'json');
		      }
		    });
	  	}
		//初始化select
		initFormSelectsExt({ //选择负责人
			id: "executor",
			url: "/system/org/user/selectjson",
			first: "选择负责人"
		});
	  	//初始化日期控件
		laydate.render({ 
			elem: '#sellDate',
			range:'~'
		});
	  //本周、本月切换
	  $("#switchDate").on('click',function(){
		  $(this).find("span").toggleClass("active");//样式切换
		  var type=$(this).find("span.active").attr("data-type");
		  if(type=="month"){
			  $("span.date-type").text("本月");
			  $("#newAddcus").text(monthCount.newAddcus);
			  $("#win").text(monthCount.win);
			  $("#lose").text(monthCount.lose);
		  }else if(type=="week"){
			  $("span.date-type").text("本周");
			  $("#newAddcus").text(weekCount.newAddcus);
			  $("#win").text(weekCount.win);
			  $("#lose").text(weekCount.lose);
		  }
	  });
	  //搜索
	  $("#searchBtn").click(function(){
		  params=new Object();
		  //执行人
		  var val=$("#executor").val();
		  if(val)params.executor=val;
		  //销售阶段
		  val=$("#customerState").val();
		  if(val)params.customerState=val;
		  //销售记录创建时间 范围
		  val=$("#sellDate").val();
		  if(val){
			  var arr=val.split(/\s~\s/);//格式化日期，取出起始时间和结束时间
			  params.sellDateSta=arr[0];
			  params.sellDateEnd=arr[1];
		  }
		  //删除现有元素 重新加载
		  sellFlow();
	  });
	  
	  	//跟进客户名称或联系方式搜索客户列表
		var timeOut=null;
		$("#customerSearch").on('input',function(){
			clearInterval(timeOut);
			var _this=$(this);
			timeOut=setTimeout(function(){
				var list = $("#customerList");
			  	list.empty();
			  	if(_this.val()){//有参数才进行查询
					searchCusByNamePhone(_this.val(),list);
			  	}
			},500);
		});
		$("#customerSearch").on('blur',function(){
			setTimeout(function(){
				$(this).val("");
				clearInterval(timeOut);
				$("#customerList").empty();
			},200);
		});
		var customerListTl=$("#customerListTl").html();
	  	//根据客户名称或者手机号搜索客户
		function searchCusByNamePhone(val,list){
			$.getJSON("/app/customerInfo/findCusByNamePhone",{
				param:val
		  	},function(res){
			  	$.each(res,function(i,v){
			  		var tl = $(customerListTl).attr("data-cid",v.id).click(linkCustomerDetail);//每次循环使用模板创建新的表单元素
			  		tl.find(".customerName").text(v.customerName);//客户名称
			  		tl.find(".executor").text(v.executor);//负责人
			  		tl.find(".nextTimDate").text(new Date(v.nextTimDate).format('yyyy-MM-dd'));//跟进时间
			  		tl.find(".created").text(new Date(v.created).format('yyyy-MM-dd'));//创建时间
			  		tl.find(".phone").text(v.contactsTelephone||'无');//联系人
			  		var t,c;
			  		if(v.customerState==0){
			  			t="初步接洽";
			  			c="status-initial";
			  		}
			  		else if(v.customerState==1){
			  			t="赢单";
			  			c="status-win";
			  		}
			  		else if(v.customerState==2){
			  			t="流失";
			  			c="status-failed";
			  		}
			  		tl.find(".customerState").addClass(c).text(t);//客户状态
					list.append($(tl));
			  	});
		  });
	  	}
	  	//点击客户列表进行跳转
		function linkCustomerDetail(){
			location.href="/app/customerInfo/details/"+$(this).attr("data-cid");
		}
	  
	});
});
function renderComment(data){
	var num=data.length/10;
	var commentStr=`<div class="nav-comment-content border-bottom-lg">`
		+`<header class="clearfix">`
			+`<div class="comment-portrait">`
				+`<img src="../../images/user_head.jpg" alt="">`
			+`</div>`
			+`<div class="comment-name">`
				+`<span class="comment-people">孟卓炳</span>`
				+`<span class="comment-time">1 个月前</span>`
			+`</div>`
		+`</header>`
		+`<div class="nav-comment-text">`
			+`<p>`
				+`已成交`
				+`<span class="flow">#客户上门</span>`
			+`</p>`
			+`<p>`
				+`<span style="color: rgb(51, 51, 51);">可对比竞品：</span>无`
			+`</p>`
			+`<div class="communicate under-line">`
				+`<span class="status-win" >赢单</span>`
				+`<i class="layui-icon layui-icon-username"></i>`
				+`<span>`
					+`<a href="javascript:void(0)">北京燕博园教育科技有限公司</a>`
				+`</span>`
			+`</div>`
		+`</div>`
		+`<div>`
			+`<div class="nav-comment-children"></div>`
			+`<div class="comment-reply-box flex-between clear-fix ">`
				+`<img src="../../images/user_head.jpg" style="width: 36px; height: 36px; border-radius: 100px;">`
				+`<div class="layui-input-inline">`
					+`<input class="layui-input" name="recodeComment" value="" placeholder="添加回复">`
				+`</div>`
				+`<button class="layui-btn  layui-btn-sm layui-btn-normal btn-bg f-right">发送</button>`
			+`</div>`
		+`</div>`
	+`</div>`; 	
}
</script>
</html>
